<template>
	<view class="homework-container">
		<view class="homework-header safe-area">
			<view class="header-content">
				<view class="back-icon" @tap="goBack">
					<uni-icons type="left" size="23" color="#333"></uni-icons>
				</view>
				<text class="title">我的作业</text>
			</view>
		</view>
		<view class="homework-list">
			<!-- 如果作业列表为空，显示暂无作业提示 -->
			<view v-if="homeworkList.length === 0" class="no-homework-tip">
				<text>暂无作业</text>
			</view>
			<HomeWorkCardVue v-for="homework in homeworkList" :key="homework.id" :title="homework.title"
				:isSubmitted="homework.submitted" :endDate="homework.endDate" @click="navigateToAnswer(homework)" />
		</view>
	</view>
</template>

<script setup>
	import HomeWorkCardVue from '../../components/HomeWorkCard.vue';
	import {
		onMounted,
		reactive,
		ref,
		onActivated
	} from 'vue';
	import {
		apiGetHomeWork,
		apiIsSubmitHomeWork
	} from '../../api/apis';

	// 获取作业的表单数据对象
	const getHomeWorkForm = reactive({
		classId: null,
		studentId: null,
		projectId: null,
	});

	// 存储作业列表数据的响应式引用
	const homeworkList = ref([]);

	onMounted(() => {
		uni.getStorage({
			key: 'studentInfo',
			success: function(res) {
				const studentVO = res.data;
				console.log(studentVO);
				console.log("aaaaaaaaaaa");
				getHomeWorkForm.projectId = studentVO.project.id;
				console.log("aaaaaaaaaaa1");
				getHomeWorkForm.classId = studentVO.classs.id;
				console.log("aaaaaaaaaaa2");
				getHomeWorkForm.studentId = studentVO.id;
				HandleGetHomeWork();
			},
		});
	});

	onActivated(() => {
		uni.getStorage({
			key: 'studentInfo',
			success: function(res) {
				const studentVO = res.data;
				console.log(studentVO);
				console.log("bbbbbbbbb");
				getHomeWorkForm.projectId = studentVO.project.id;
				getHomeWorkForm.classId = studentVO.classs.id;
				getHomeWorkForm.studentId = studentVO.id;
				HandleGetHomeWork();
			},
		});
	})

	const HandleGetHomeWork = async function() {
		try {
			const res = await apiGetHomeWork(getHomeWorkForm);
			if (res.code === 0 && res.data && res.data.length > 0) {
				homeworkList.value = res.data;
			} else {
				// 即使接口返回成功但无实际作业数据，也显示暂无作业提示
				homeworkList.value = [];
			}
		} catch (error) {
			console.error('获取作业列表出现错误:', error);
			uni.showToast({
				title: "获取作业列表失败，请稍后重试",
				icon: 'none',
				duration: 2000
			});
		}
	};

	const goBack = function() {
		uni.navigateBack();
	};

	const navigateToAnswer = async function(homework) {
		const now = new Date().getTime();
		const endDate = new Date(homework.endDate).getTime();
		// isSubmitForm.homeWorkId = homework.id;

		try {
			// const res = await apiIsSubmitHomeWork(isSubmitForm);
			// console.log(res);

			// 检查是否超时且未作答
			if (now > endDate && homework.submitted === false) {
				console.log(1);
				uni.showToast({
					title: '没在规定时间作答，无法查看作业详情',
					icon: 'none',
					duration: 2000,
				});
				return;
			}

			// 跳转到作业详情页面
			uni.navigateTo({
				url: `/pages/homework/homeworkDetail?id=${homework.id}&title=${encodeURIComponent(homework.title)}`,
			});
		} catch (error) {
			console.error('发生错误:', error);
			uni.showToast({
				title: '请求失败，请稍后重试',
				icon: 'none',
				duration: 2000,
			});
		}
	};
</script>


<style lang="scss" scoped>
	page {
		background-color: transparent;
	}

	.homework-container {
		min-height: 100vh;
		// background: rgba(245, 247, 250, 0.98);
		// backdrop-filter: blur(10px);
		padding: 0;
		padding-top: var(--status-bar-height, 44px);
	}

	.homework-header {
		padding: 20rpx 30rpx;

		.header-content {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;

			.back-icon {
				position: absolute;
				left: 0;
				display: flex;
				align-items: center;
				height: 100%;
				padding: 0 20rpx;
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.homework-list {
		margin-top: 20rpx;
		padding: 0 20rpx;

		// 为暂无作业提示添加样式，使其居中显示等
		.no-homework-tip {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.homework-item {
		background-color: #ffffff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.homework-status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	// .未完成 {
	// 	color: #ff6b6b;
	// 	background-color: #ffe5e5;
	// }

	// .已完成 {
	// 	color: #51cf66;
	// 	background-color: #e6f3e6;
	// }
</style>